<template>
  <div class="commission">
    <div class="title">
      <p>{{ title }}</p>
      <p class="update" @click="onUpdate">修改</p>
    </div>

    <div class="total flex">
      <div class="info">
        {{ infoStr }}
      </div>
      <div class="btns flex">
        <Button type="primary" @click="onAdd">添加房源</Button>
        <Button type="primary" @click="onImport">房源导入</Button>
        <Button @click="onClear">清空列表</Button>
        <Button type="primary" @click="onExport">导出Excel</Button>
        <Button type="primary" @click="onSubmit">提交结算</Button>
      </div>
    </div>

    <dt-grid ref="table" :columns="columns" :list="list" @filter="onFilter" />

    <submit-modal ref="submit" @success="onSubmitSuccess"></submit-modal>
    <room-modal ref="room" @success="onRoomSuccess"></room-modal>
    <import-modal ref="import" @success="onImportSuccess"></import-modal>
    <initiate-modal ref="initiate" @success="onUpdateSuccess"></initiate-modal>
  </div>
</template>

<script>
  import columnOpt from './opt/room.js'
  import initiateMgr from '@/biz/commission/initiate.js'
  import submitModal from './components/submit-modal.vue'
  import roomModal from './components/room-modal.vue'
  import importModal from './components/import-modal.vue'
  import initiateModal from './components/initiate-modal.vue'

  export default {
    components: {
      submitModal,
      roomModal,
      importModal,
      initiateModal
    },
    data() {
      return {
        commissionId: null,
        options: [],
        filterInfo: {},
        columns: [],
        list: [],
        curItem: {},
        title: '',
        infoStr: '',
        detail: {}
      }
    },
    mounted() {
      this.commissionId = this.$route.query.commissionId
      this.$refs.table.init(this)
      this.getList()
      this.list = []
    },
    methods: {
      onFilter(data) {
        console.log(data)
        this.filterInfo = { ...data }
        this.getList()
      },
      onUpdate() {
        this.$refs.initiate.update({
          commissionId: this.commissionId,
          commissionName: this.detail.commissionName,
          commissionMonth: this.detail.commissionMonth,
          settlementType: this.detail.settlementType
        })
      },
      onDelete(item) {
        this.$Modal.confirm({
          title: '是否确认删除该房源？',
          onOk: () => {
            initiateMgr.roomDel(item.commissionDetailId).then((res) => {
              this.getList()
            })
          }
        })
      },
      onAdd() {
        this.$refs.room.show(this.detail)
      },
      onImport() {
        this.$refs.import.show({
          commissionId: this.commissionId
        })
      },
      onClear() {
        this.$Modal.confirm({
          title: '是否确认清空房源？',
          onOk: () => {
            initiateMgr.roomClear(this.commissionId).then((res) => {
              this.getList()
            })
          }
        })
      },
      onSubmitSuccess() {
        this.$$emit('submit')
        this.$router.go(-1)
      },
      onRoomSuccess() {
        this.getList()
      },
      onImportSuccess() {
        this.getList()
      },
      onUpdateSuccess() {
        this.getList()
      },
      onExport() {
        initiateMgr.exportInfo({
          type: 2,
          commissionId: this.commissionId,
          ...this.filterInfo
        })
      },
      onSubmit() {
        this.$refs.submit.show(this.detail)
      },
      getList() {
        this.$refs.table.loading = true
        let data = {
          type: 2,
          commissionId: this.commissionId,
          ...this.filterInfo,
          isRepeatSubmit: this.$route.query.flag == 'resend' ? true : false
        }
        initiateMgr
          .detail(data)
          .then((res) => {
            this.detail = res
            this.columns = columnOpt.options(res)
            this.title =
              res.commissionName +
              ` (${res.commissionMonth} ${this.$dt.dictInfo().__value('settlementType', res.settlementType)})`
            this.infoStr = `共${res.roomCount}套房源，总签约金额${this.$dt.tool.formatterMoney(
              res.sumAmount
            )}元`
            if (res.settlementType == 'STANDARD' || res.settlementType == 'DEPOSIT') {
              let preAgentCost = 0
              let preSettlementAmount = 0
              res.settlementDetails.forEach((i) => {
                preAgentCost += Number(i.preAgentCost ?? 0)
                preSettlementAmount += Number(i.preSettlementAmount ?? 0)
              })
              this.infoStr += `，预计结算总销${this.$dt.tool.formatterMoney(
                preSettlementAmount
              )}元，预计结算代理费${this.$dt.tool.formatterMoney(preAgentCost)}元`
            }
            this.list = res.settlementDetails
            this.pageData.total = Number(res.total)
            this.$refs.table.loading = false
          })
          .catch((err) => {
            this.$refs.table.loading = false
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;

    .title {
      margin-bottom: 20px;
      font-size: 20px;
      display: flex;
      align-items: center;

      .update {
        font-size: 16px;
        color: #3366ff;
        text-decoration: underline;
        margin-left: 20px;
        cursor: pointer;
      }
    }

    .total {
      justify-content: space-between;

      Button {
        margin-left: 10px;
      }
    }
  }
</style>
